<template>
	<view class="resume">
		<cu-custom bgColor="bg-white" :isBack="true">
		  <block slot="backText">返回</block>
		  <block slot="content">个人简历</block>
		</cu-custom>
		<view class="header-wrap">
			<image mode="widthFix" src="../../static/images/headerbg.png"></image>
			<view class="header">
				<view class="header-top">
					<image class="person" src="../../static/images/person.jpg" ></image>
					<view class="top-info">
						<view>郭俊权 • 男</view>
						<view>幼儿园 • 软件工程师（求职中）</view>
					</view>
				</view>
				<view class="header-bottom">
					<view>
						<view class="bottom-num">2.5</view>
						<view class="bottom-flag">经验（年）</view>
					</view>
					<view>
						<view class="bottom-num">20</view>
						<view class="bottom-flag">参与项目</view>
					</view>
					<view>
						<view class="bottom-num">3000</view>
						<view class="bottom-flag">期望薪资</view>
					</view>
				</view>
			</view>
			<view class="contact" @tap="phoneCall">
				欢迎联系 •
				<text>15914967410</text>
			</view>
		</view>
		<view class="contents">
			 <view class="tab">
				<view @tap="swichNav" class="tab-item" :class="currentTab==0?'on':''" data-current="0">
					我的简介<text :class="currentTab==0?'active':''"></text>
				</view>
				<view @tap="swichNav" class="tab-item" :class="currentTab==1?'on':''" data-current="1">
					项目经历<text :class="currentTab==1?'active':''"></text>
				</view>
				<view @tap="swichNav" class="tab-item" :class="currentTab==2?'on':''" data-current="2">
					工作经历<text :class="currentTab==2?'active':''"></text>
				</view>
			</view>
		</view>
		<swiper @change="swiperChange" class="swiper" :current="currentTab">
			<swiper-item>
				<view class="padding-xl radius shadow-warp bg-white margin-top">
						<view class="cuIcon-medalfill text-xl text-blue text-center"></view>
						<view class="edu margin-top text-center text-bold"></view>
						<view class="margin-top">
								<text class="cuIcon-time"></text>
								<text class="margin-left-sm">2013.9-2017.7</text>
						</view>
						<view class="margin-top-sm">
								<text class="cuIcon-home"></text>
								<text class="margin-left-sm">北京理工大学珠海学院</text>
						</view>
						<view class="margin-top-sm">
								<text class="cuIcon-attentionfavor"></text>
								<text class="margin-left-sm">电子科学与技术</text>
						</view>
				</view>
				<view class="content-item">
					<view class="item-li van-hairline--bottom">
						<view class="item-li-title">
							<text class="cuIcon-appreciatefill text-xl text-blue"></text>
							我的技能
						</view>
						<view class="item-li-desc" v-for="(item,index) of skillList" :key="index">
							{{index+1}}. {{item.desc}}
						</view>
					</view>
					<view class="item-li van-hairline--bottom">
						<view class="item-li-title">
							<text class="cuIcon-appreciatefill text-xl text-blue"></text>
							自我评价
						</view>
						<view class="item-li-desc">
							{{evaluate}}
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="content-item">
					<view class="item-li van-hairline--bottom" v-for="(item,index) of projectList" :key="index">
						<view class="item-li-title">
							<text class="cuIcon-appreciatefill text-xl text-blue"></text>
							{{item.name}}
						</view>
						<view class="item-li-title">
							<text>{{item.date}}</text>
						</view>
						<view class="item-li-flag"> {{item.skill}} </view>
						<view class="item-li-desc" v-for="(ite,idx) of item.desc" :key="idx">
							<text>{{idx}}</text>. {{ite}}
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="padding-xl radius shadow-warp bg-white margin-top">
						<view class="cuIcon-appreciatefill text-xl text-blue text-center"></view>
						<view class="evaluate margin-top text-center text-bold"></view>
						<view class="margin-top evaluate-cont">
								<text>1. 性格乐观、稳重，踏实，兴趣广泛，勤奋好学；</text>
								<text>2. 责任心强，适应能力强，执行力强，善于沟通；</text>
								<text>3. 勇于迎接新的挑战，具备很强的事业心和团队协作的精神，愿接受一切工作的考验，相信自己的加入会给公司创造更高的价值。</text>
						</view>
				</view>
				<view class="content-item">
					<view class="item-li van-hairline--bottom" v-for="(item,index) of jobList" :key="index">
						<view class="item-li-title">
							<text class="cuIcon-appreciatefill text-xl text-blue"></text>
							{{item.name}}
						</view>
						<view class="item-li-title">
							<text>{{item.date}}</text>
						</view>
						<view class="item-li-desc">{{item.desc}}</view>
					</view>
				</view>
			</swiper-item>
			</swiper>
	</view>
</template>

<script>
export default {
	data() {
		return {
			swiperBar: 0,
			currentTab: 0,
			skillList: [ {
				id: 0,
				desc: "擅长Word、excel、ppt、wind等软件的安装与卸载"
			}, {
				id: 1,
				desc: "精通PE、PS、PB、PR、AE等单词的拼写"
			}, {
				id: 2,
				desc: "熟悉Windows、Linux、Mac、Android、iOS等系统的开关机"
			}, {
				id: 3,
				desc: "熟悉React/Vue/小程序/uniApp/Taro/Kbone/mpvue/ES6+"
			}, {
				id: 4,
				desc: "熟悉Node/MySQL/MongoDB/云开发"
			}, {
				id: 5,
				desc: "掌握webpack/grunt/glup/sass/sass/less/styl"
			}, {
				id: 6,
				desc: "掌握layui/color-ui/Photoshop/git/svn"
			} ],
			evaluate: "本人能在地球仪上快速找出联合国五个常任理事国，能通过数0的方式准确区别人民币100元与10元纸币，还能在公交车上精确指出驾驶员的座位。诚意求职，非诚勿扰。",
			projectList: [ {
				id: 0,
				name: "支付宝集五福十多亿项目",
				date: "2018.03 - 2018.03",
				skill: "技术栈：微信 + 朋友圈 + 支付宝",
				desc: {
					1: "使用 HTML + CSS + JQ 等前端技术，使用 Bootstrap 前端框架完成 PC 端",
					2: "使用 MUI 框架完成 H5、APP 端，使用 HBuilderX 实现打包"
				}
			}, {
				id: 1,
				name: "度才子错峰用工平台",
				date: "2019.03 - 2019.9",
				skill: "技术栈：HTML + CSS + JQ + Bootstrap",
				desc: {
					1: "使用 HTML + CSS + JQ 等前端技术，使用 Bootstrap 前端框架完成 PC 端和 H5 端"
				}
			}, {
				id: 2,
				name: "官网类项目",
				date: "2019.09 - 2019.12",
				skill: "技术栈：layui 前端框架",
				desc: {
					1: "度才子官网、度才子后台、社旗中等职业学校官网"
				}
			}, {
				id: 3,
				name: "小程序项目(自学)",
				date: "2020",
				skill: "技术栈：微信小程序、Vant",
				desc: {
					1: "使用微信小程序技术，完成个人简历的制作",
					2: "使用微信小程序，完成 bilibili 网站、商城 demo 的制作"
				}
			} ],
			jobList: [ {
				id: 0,
				name: "广东度才子集团有限公司",
				date: "2018.07 - 2019.12",
				desc: "根据UI给出的效果图完成前端界面的显示"
			} ]
		}
	},
	onLoad: async function(option) {
	},
	methods: {
		swichNav: function(e) {
			if (this.currentTab === e.target.dataset.current){
				return false;
			}
			this.currentTab= e.target.dataset.current
		},
		swiperChange: function(e) {
			this.currentTab= e.detail.current;
		},
		phoneCall: function() {
			uni.makePhoneCall({
					phoneNumber: "15914967410",
					complete: function(n) {},
					fail: function(n) {},
					success: function(n) {}
			});
		},
		saveContact: function() {
				uni.addPhoneContact({
						firstName: "郭俊权",
						remark: "软件工程师",
						mobilePhoneNumber: "15914967410"
				});
		},
	},
};
</script>

<style>
page{
		background-color: #fff;
}
.header-wrap {
    position: relative;
}

.header-wrap image {
    width: 100%;
}

.header {
    position: absolute;
    top: 55rpx;
    left: 80rpx;
}

.header-top {
    display: flex;
}
.header-top .person{
	display: block;
	width: 135rpx;
	height: 135rpx;
	border-radius: 50%;
}
.header-top .top-info {
    margin: 15rpx 0 50rpx 30rpx;
    font-size: 32rpx;
    color: #fff;
}

.header-top .top-info view:nth-child(1) {
    font-size: 38rpx;
    margin-bottom: 10rpx;
}

.header-bottom {
    display: flex;
    justify-content: space-between;
    text-align: center;
    color: #fff;
}

.header-bottom .bottom-num {
    font-size: 30rpx;
    font-weight: bold;
}

.header-bottom .bottom-flag {
    font-size: 26rpx;
}

.contact {
    position: absolute;
    bottom: -60rpx;
    left: 0;
    width: 100%;
    height: 125rpx;
    line-height: 125rpx;
    text-align: center;
    color: #666666;
    background: #fff;
    border-radius: 20rpx;
}

.contact:before {
    content: "";
    position: absolute;
    top: 65rpx;
    left: 45rpx;
    width: 100rpx;
    height: 4rpx;
    background: #c9c9c9;
}

.contact:after {
    content: "";
    position: absolute;
    top: 65rpx;
    right: 45rpx;
    width: 100rpx;
    height: 4rpx;
    background: #c9c9c9;
}

.contact text {
    color: #6189fb;
}

.contents {
    position: relative;
    margin-top: 60rpx;
    z-index: 2;
}

.tab {
    display: flex;
    justify-content: space-around;
    height: 76rpx;
    line-height: 76rpx;
    font-size: 31rpx;
    color: #666666;
}

.tab .tab-item {
    position: relative;
}

.tab .tab-item.on {
    font-weight: bold;
    color: #2a2929;
}

.tab .tab-item .active {
    position: absolute;
    bottom: 20rpx;
    left: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: 18rpx;
    background: #ffc600;
}

.item-li {
    padding: 20rpx 0;
}

.item-li-title {
    margin: 0 0 15rpx 40rpx;
    font-size: 28rpx;
    font-weight: bold;
    letter-spacing: 4rpx;
    color: #333333;
}

.item-li-title text {
    margin-left: 32rpx;
}

.item-li-desc {
    margin: 0 30rpx 10rpx 71rpx;
    font-size: 24rpx;
    letter-spacing: 2rpx;
    color: #676767;
}

.item-li-flag {
    margin: 0 30rpx 20rpx 71rpx;
    font-size: 26rpx;
}

swiper {
	height: 1200rpx;
}

.edu,.evaluate {
    height: 1px;
    border-top: 1px solid #ddd;
}

.edu::before,.evaluate::before {
    position: relative;
    top: -25rpx;
    height: 50rpx;
    line-height: 50rpx;
    background: #fff;
    padding: 0 20rpx;
}

.edu::before {
    content: "教育经历";
}

.evaluate::before {
    content: "自我评价";
}

.evaluate-cont {
    text-align: justify;
}

.evaluate-cont text {
    display: block;
}

</style>